<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body marginwidth="400" marginheight="200" bgcolor=#BDE1EC>
		
<tr align="center"  >
	   <form> 
		   <label >注册账户</label>
		   <br>
<!--
		  <div class="out">
			    设置账号： <input type="text">
		   </div>
		   
		  <div class="out">
			    设置密码： <input type="password">
		   </div>
		   
		  <div class="out">
			    确认密码： <input type="password" >
		   </div>
-->
	<form id="userFrom" method="get">

    用户名：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="username" name="username">
    <span id="usernameError"></span>
    <br>
    
    密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="password" name="password">
    <span id="passwordError"></span>
    <br>
    
    确认密码：<input type="text" id="confirmPwd" name="confirmPwd">
    <span id="confirmPwdError"></span>
    <br>
    
    邮箱地址：<input type="text" id="email" name="email">
    <span id="emailError"></span>
    <br>
		<div class="out">
			手机号码：<select>
			<option>中国+86</option>
			<option>台湾+886</option>	
			<option>香港+852</option>
			<option>日本+81</option>
			<option>韩国+82</option>
			<option>美国+1</option>
			</select>
		    <input type="text" class="phone">	  
		   </div>
		   
		   <div class="out">
			    验证码： <input type="password" class="verify" >
			   <span> wayy</span>
		</div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="提交信息" id="submitBtn">
    
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="重置信息" id="resetBtn">
    </form>

<!--
		   
		  <div class="out">
			  手机号码：<select>
			          <option>中国+86</option>
					  <option>台湾+886</option>
					  <option>香港+852</option>
					  <option>日本+81</option>
					  <option>韩国+82</option>
					  <option>美国+1</option>
			          </select>
			  <input type="text" class="phone">	  
		   </div>
		   
		   <div class="out">
			    验证码： <input type="password" class="verify" >
			   <span> wayy</span>
		   </div>
		   
		   <div class="out">
			   
		   </div>
		   <div class="out">
			   <input type="submit" class="register" value="登录" >
		   </div>
-->
	
	</form>
	</tr>
	   <script type="text/javascript">
        /*
            表单验证需求
            1、用户名不能为空
            2、用户名必须在6-14位
            3、用户名和密码由数字和字母组成（正则表达式）
            4、密码和确认密码一致，邮箱地址合法
            5、统一失去焦点验证
            6、错误信息统一在span标签中显示，要求字体12号，红色
            7、文本框获得焦点，清除错误信息，如果文本框中数据不合法，要求清空文本框的value
            8、最终表单所有项均合法方可提交
         */
         //网页加载完毕后可执行JS代码
        window.onload=function () {
            var retVal=true;
            var usernameElt=document.getElementById("username");
            var usernameErrorSpan=document.getElementById("usernameError");
            //用户名正则表达式
            var usernameRegExp = /^[a-zA-Z0-9_-]{4,16}$/;
            
			 //用户名验证开始
            //用户名验证,失去焦点验证
            usernameElt.onblur=function () {
                //判断username的value值是否为空
                //清除前后空白
                var username = usernameElt.value.trim();
                usernameElt.value = username;
                var usernameRetVal = usernameRegExp.test(username);

                //username不为空或全为空格开始验证
                if (!(usernameElt.value=="")) {
                    if (!usernameRetVal) {
                        //此处测试正确
                        //获取用户名后文本对象
                        usernameErrorSpan.innerHTML = "<font color='red'>用户名不符合格式</font>";
                    } else {
                        //此处测试正确
                        usernameErrorSpan.innerHTML = "<font color='green'>用户名符合格式</font>";
                    }
                }else {
                    usernameErrorSpan.innerHTML="<font color='red'>用户名不能为空</font>"
                }
            }




            //获取焦点，清除span内容
            usernameElt.onfocus=function () {
                //如果username等于一个或多个空格
                //清空非法value,使用index函数，结果等于-1，则不含有该字符串
                if(!(usernameErrorSpan.innerText.indexOf("不")==-1)){
                    //如果usernameError不为空串,字符串中含有"不"清空value
                    usernameElt.value="";
                }
                //清空span内容
                usernameErrorSpan.innerText="";
            }
            
         

            //密码验证，失去焦点验证
            var passwordElt=document.getElementById("password");
            var  passwordErrorSpan=document.getElementById("passwordError")
            var passwordRegExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/
            //密码验证，失去焦点开始验证
            passwordElt.onblur=function () {
                //去除前后空白
                var password=passwordElt.value.trim();
                passwordElt.value=password;
                //password不为空开始验证
                if(!(passwordElt.value=="")){
                    //密码格式验证
                    var passwordRetVal=passwordRegExp.test(password);
                    if(passwordRetVal){
                       passwordErrorSpan.innerHTML="<font color='green'>密码格式正确</font>"
                    }else{
                        passwordErrorSpan.innerHTML="<font color='red'>密码格式不正确(数字和字母结合)</font>"
                    }
                }else{
                    //密码不能为空
                    passwordErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
                }
            }




            //密码获得焦点,密码获得焦点，重复密码span内容清空
            passwordElt.onfocus=function () {
                //清空非法value,使用index函数，结果等于-1，则不含有该字符串
                if(!(passwordErrorSpan.innerText.indexOf("不")==-1)){
                    //如果passwordErrorSpan不为空串,字符串中含有"不"清空value
                    passwordElt.value="";
                }
                //清空span内容
                passwordErrorSpan.innerText="";
                

            }




            //确认密码验证，失去焦点验证
            var confirmPwdElt=document.getElementById("confirmPwd");
            var  confirmPwdErrorSpan=document.getElementById("confirmPwdError");

            //密码验证，失去焦点开始验证
            confirmPwdElt.onblur=function () {
                //清除验证密码中的前后空白
                var confirmPwd=confirmPwdElt.value.trim();
                confirmPwdElt.value=confirmPwd;
                //判断密码内容是否为空，不为空则开始验证
                if(!(confirmPwdElt.value=="")){
                    //重复密码内容不为空，开始验证
                    //判断密码是否为空，不为空则开始验证
                    if(passwordElt.value==""){
                        confirmPwdErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
                    }else{
                        //判断密码和重复密码是否相等
                        if(passwordElt.value===confirmPwdElt.value){
                            //更改passwordErrorSpan中内容
                            confirmPwdErrorSpan.innerHTML="<font color='green'>重复密码验证成功</font>"
                        }else {
                            confirmPwdErrorSpan.innerHTML="<font color='red'>重复密码验证不成功</font>"
                        }
                    }
                }else{
                    confirmPwdErrorSpan.innerHTML="<font color='red'>验证密码不能为空</font>"
                }
            }
            //获取重复密码焦点时，清空span内数据，如果重复密码错误，则清空重复密码
            confirmPwdElt.onfocus=function () {
                //使用indexOf()方法判断span字符串中是否含有"失"字,结果等于-1，则不含有失字
                if(!(confirmPwdErrorSpan.innerHTML.indexOf("失")==-1)){
                    //清空非法重复密码值
                    confirmPwdElt.value="";
                }
                //获取焦点时清除span内值
                confirmPwdErrorSpan.innerText="";
            }





            //邮箱地址验证
            var emailElt=document.getElementById("email");
            var emailErrorSpan=document.getElementById("emailError")
            var emailRegExp=/^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
            //失去焦点时开始验证
            emailElt.onblur=function () {
                //去除邮箱地址前后空白
                var email=emailElt.value.trim();
                emailElt.value=email;
                var emailRetVal=emailRegExp.test(email);
                //邮箱地址不为空时开始验证
                if(!(emailElt.value=="")){
                    //开始验证
                    if(emailRetVal){
                        emailErrorSpan.innerHTML="<font color='green'>邮箱地址格式验证成功</font>"
                    }else{
                        emailErrorSpan.innerHTML="<font color='red'>邮箱地址格式验证不成功</font>"
                    }
                }else {
                    emailErrorSpan.innerHTML="<font color='red'>邮箱地址不能为空</font>"
                }
            }



            //获得焦点时，邮箱格式不正确，则清空非法邮箱value值，并清除span内容
            emailElt.onfocus=function () {
                //indexOf方法结果为-1，则表示不含有该字符串
                if(!(emailErrorSpan.innerText.indexOf("失")==-1)){
                    //清空非法value值
                    emailElt.value="";
                }
                    //不管地址验证是否成功，在获取焦点后都要讲span中内容删除
                emailErrorSpan.innerText="";
            }
            // 提交表单
            //获取表单队形
            var submitElt=document.getElementById("submitBtn");
            //点击事件发生，进行表单信息提交验证
            submitElt.onclick=function () {
                    if(usernameErrorSpan.innerText==""){
                        usernameElt.focus();
                         usernameElt.blur();
                    }
                    if(passwordErrorSpan.innerText==""){
                        passwordElt.focus();
                        passwordElt.blur();
                    }
                    if (confirmPwdElt.innerText==""){
                        confirmPwdElt.focus();
                        confirmPwdElt.blur();
                    }
                    if(emailElt.innerText==""){
                        emailElt.focus();
                        emailElt.blur();
                    }
                    //表单提交
                var userFromElt=document.getElementById("userFrom");
                if(usernameElt.innerText.indexOf("不")==-1||passwordElt.innerText.indexOf("不")==-1||confirmPwdElt.innerText.indexOf("不")==-1||emailElt.innerText.indexOf("不")==1){
                    userFromElt.action="http://localhost:8080/jd/save"
                    //提交表单
                    userFromElt.submit();
                }
            }
        }
    </script>


</body>
</html>
